<!--
 * @Author: Tim
 * @Date: 2020-08-26 19:43:29
 * @LastEditTime: 2020-08-27 16:18:10
 * @LastEditors: Please set LastEditors
 * @Description: button组件封装
 * @FilePath: /afire/components/af_button/index.vue
-->
<template>
    <view class="af-flex-row af-x-center af-fs-28 af-button-wrap af-txt-overflow" :style="getStyl"
        :class="[getClss, externalClass]" @tap.stop="onTap">
        <slot></slot>
        <text>{{text}}</text>
    </view>
</template>

<script>
    export default {
        props: {
            externalClass: String,

            height: {
                type: Number,
                default: 80
            },

            type: String,

            text: {
                type: String,
                default: '确定'
            }
        },

        computed: {
            getStyl() {
                return `height:${this.height}rpx;`;
            },

            //内置的几种样式
            getClss() {
                let clss;
                switch (this.type) {
                    case 'primary':
                        clss = 'af-button-primary';
                        break;

                    case 'blue':
                        clss = 'af-button-blue';
                        break;

                    case 'green':
                        clss = 'af-button-green';
                        break;

                    case 'red':
                        clss = 'af-button-red';
                        break;

                    default:
                        clss = 'af-button-primary';
                }

                return clss;
            }
        },

        methods: {
            onTap() {
                this.$emit('click');
            }
        }
    }
</script>

<style lang="scss" scoped>
    .af-button-wrap {
        height: 80upx;
        border-radius: 10upx;
        color: #fff;
        box-sizing: border-box;
        padding: 10upx 20upx;

        &:active {
            opacity: 0.85;
        }
    }

    .af-button-primary {
        background-color: #fefefe;
        border: 1px solid #e1e1e1;
        color: #141414
    }

    .af-button-green {
        background-color: #4cd964;
        border: 1px solid #23d340;
    }

    .af-button-blue {
        background-color: #007aff;
        border: 1px solid #016de0;
    }

    .af-button-red {
        background-color: #db3e39;
        border: 1px solid #d6221c;
    }
</style>